<script setup>
import { reactive, onMounted } from 'vue'
import servers from '@/utils/request.js'

const tableData = reactive([]);

onMounted(() => {
  servers.post('/loginRecords/')
      .then((response) => {
        const { data } = response.data;
        tableData.push(...data);
      })
      .catch((error) => {
        console.error('请求获取登录记录出现错误：', error);
      });
});
</script>

<template>
  <div id="main">
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="账号登录历史">
        <el-table-column prop="account" label="用户名" width="180" />
        <el-table-column prop="ip_address" label="IP" width="180" />
        <el-table-column prop="login_time" label="登录时间" width="180" />
        <el-table-column prop="status" label="登录状态" width="180" />
        <el-table-column prop="location" label="IP所属地址" />
      </el-table-column>
    </el-table>
  </div>
</template>